<template>
	<div class="loader" :class="[flag ? 'loaderFlag' : '',preFlag ? 'preFlag' :'']">
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</template>

<script>
	export default {
		name: "loading",
		props: {
			flag: {
				type: Boolean,
				default: false
			},
			preFlag:{
				type: Boolean,
				default: false
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	// 加载中
	.loader {
		position: fixed;
		top: 35%;
		left: 40%;
		transform: translate(-50%, -50%);
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		z-index: 99;
		background: linear-gradient(#ee280e, #15a0f7, #6ed15a);
		animation: animate7712 1.2s linear infinite;
	}
	.loaderFlag{
		position: absolute !important;
		top: 35%;
		left: 50%;
		transform: translate(-50%, -50%);
	}
	.preFlag{
		top: 45%;
		left: 45%;
		transform: translate(-50%, -50%);
	}

	@keyframes animate7712 {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.loader span {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background: linear-gradient(#ee280e, #15a0f7, #5ad15a);
	}

	.loader:after {
		content: '';
		position: absolute;
		top: 7rpx;
		left: 7rpx;
		right: 7rpx;
		bottom: 7rpx;
		background: #333;
		border: solid #333 7rpx;
		border-radius: 50%;
	}

	.loader span:nth-child(1) {
		filter: blur(5rpx);
	}

	.loader span:nth-child(2) {
		filter: blur(10rpx);
	}

	.loader span:nth-child(3) {
		filter: blur(25rpx);
	}

	.loader span:nth-child(4) {
		filter: blur(50rpx);
	}
</style>